<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSelect"
          >查询</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport('#childTable', 'bom展开查询导出')"
          >导出</el-button
        >
      </el-col>
    </el-row>
    <!--
    子项Table
    -->
    <el-table
      class="childTable"
      id="childTable"
      style="width: 100%; margin-top: 18px"
      border
      size="mini"
      highlight-current-row
      v-loading="loading"
      :data="childBomList"
    >
      <el-table-column fixed label="层级" align="center" prop="level" />

      <el-table-column
        label="子项代码"
        width="140px"
        align="center"
        prop="bodZxdm"
      />

      <el-table-column
        label="子项客户编码"
        width="140px"
        align="center"
        prop="itmCustomeWldm"
      />

      <el-table-column
        label="父项代码"
        width="140px"
        align="center"
        prop="bodFxdm"
      />

      <el-table-column
        label="父项客户编码"
        width="140px"
        align="center"
        prop="itmFxCustwldm"
      />

      <el-table-column
        label="子项品名规格"
        :show-overflow-tooltip="true"
        width="350px"
        align="center"
        prop="itmPmgg"
      />

      <el-table-column
        label="父项品名规格"
        :show-overflow-tooltip="true"
        width="350px"
        align="center"
        prop="itmFxpmgg"
      />

      <el-table-column label="单位" width="80" align="center" prop="itmDw">
        <template #default="scope">
          <dict-tag :options="itmDwOptions" :value="scope.row.itmDw" />
        </template>
      </el-table-column>

      <el-table-column
        label="采购属性"
        width="80"
        align="center"
        prop="bodCgsx"
      >
        <template #default="scope">
          <dict-tag :options="bomCgsxOptions" :value="scope.row.bodCgsx" />
        </template>
      </el-table-column>

      <el-table-column
        label="主成型标识"
        width="100"
        align="center"
        prop="bodMain"
      >
        <template #default="scope">
          <dict-tag :options="bodWwbzOptions" :value="scope.row.bodMain" />
        </template>
      </el-table-column>

      <el-table-column
        label="单位用量"
        width="80"
        align="center"
        prop="bodDwyl"
      />

      <el-table-column label="单件净重" align="center" prop="itmJz" />

      <el-table-column label="单件水口" align="center" prop="itmSkzl" />

      <el-table-column label="单件毛重" align="center" prop="itmMz" />

      <el-table-column label="备注" align="center" prop="remark" />

      <el-table-column label="变更单号" align="center" prop="bodBgdh" />

      <el-table-column label="ENC单号" align="center" prop="bodEcnno" />

      <el-table-column label="变更备注" align="center" prop="bodDesc" />
    </el-table>

    <!--  查询弹窗  -->
    <el-dialog
      :title="title"
      v-model="addChildView"
      :close-on-click-modal="false"
      draggable
      width="1000px"
      append-to-body
    >
      <el-form
        ref="childForm"
        :model="childForm"
        :rules="childFormRules"
        label-width="100px"
      >
        <el-col :span="8">
          <el-form-item label="物料代码">
            <el-input
              v-model="childForm.itmWldm"
              readonly
              placeholder="筛选后点击应用生成"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品名称">
            <el-input
              v-model="childForm.itmWlpm"
              readonly
              placeholder="筛选后点击应用生成"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品规格">
            <el-input
              v-model="childForm.itmWlgg"
              readonly
              placeholder="筛选后点击应用生成"
            />
          </el-form-item>
        </el-col>

        <el-form-item label="品名规格">
          <el-input
            v-model="childForm.itmPmgg"
            readonly
            placeholder="筛选后点击应用生成"
          />
        </el-form-item>

        <el-row>
          <el-form-item label="展开层级" style="width: 200px">
            <el-input-number
              v-model="childForm.itmWldmPmgg"
              controls-position="right"
              :min="1"
            />
          </el-form-item>

          <el-form-item label="bom方向" prop="bodOrder" style="width: 500px">
            <el-radio-group v-model="childForm.bodOrder">
              <el-radio
                v-for="dict in bomStyleOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-form-item label="综合查询" prop="query">
          <el-input
            v-model="childForm.query"
            @change="getWldmListTOP50"
            filterable
            placeholder="请输入物料代码或者客户代码"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-table
        highlight-current-row
        border
        stripe
        @scrollBottom="load"
        v-loading="loading"
        height="300"
        :data="ItmWldmAndCustWldmListTop50"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="#" type="index" width="40" align="center" />
        <el-table-column
          label="物料代码"
          width="135"
          prop="itmWldm"
          align="center"
        />
        <el-table-column
          label="名称"
          :show-overflow-tooltip="true"
          align="center"
          width="120"
          prop="itmWlpm"
        />
        <el-table-column
          label="规格"
          :show-overflow-tooltip="true"
          align="center"
          prop="itmWlgg"
        />
        <el-table-column
          label="单位"
          :show-overflow-tooltip="true"
          align="center"
          width="80"
          prop="itmDw"
        >
          <template v-slot="scope">
            <dict-tag :options="itmDwOptions" :value="scope.row.itmDw" />
          </template>
        </el-table-column>
        <el-table-column
          label="库存"
          :show-overflow-tooltip="true"
          align="center"
          width="80"
          prop="kcmKcsl"
        />
        <el-table-column
          label="操作"
          :show-overflow-tooltip="true"
          align="center"
          width="80"
        >
          <template v-slot="scope">
            <el-button size="mini" type="primary" @click="getPmgg(scope.row)"
              >应用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitChildForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllCgList } from "@/api/project/mstr";

import {
  getItmMstrByItmWldmOrCustWldm,
  getItmWldmAndCustWldmList,
} from "@/api/project/materiel";
import { selectByOrders } from "@/api/project/bom";
import { exportTable } from "@/utils/ruoyi";
export default {
  name: "BomDetail",

  data() {
    return {
      editChildView: false,
      // 遮罩层
      loading: true,
      //子项Bom
      childBomList: [],
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      itmDwOptions: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //子项添加
      addChildView: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalAdd: 0,
      bodWwbzOptions: [],
      // bom资料维护表格数据
      bomList: [],
      // 弹出层标题
      title: "",
      //bom查询正反
      bomStyleOptions: [],
      // 是否显示弹出层
      open: false,
      // 状态标志字典
      bomZtbzOptions: [],
      //采购属性字典
      bomCgsxOptions: [],
      //物料编码 + 客户编码
      ItmWldmAndCustWldmList: [],
      ItmWldmAndCustWldmListTop50: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bomWldm: null,
        bomZtbz: null,
        bomCgsx: null,
        bomShry: null,
        bomShrq: null,
      },
      queryChildParams: {
        pageNum: 1,
        pageSize: 20,
      },
      // 表单参数
      form: {},
      //孩子表单
      childForm: {
        bodOrder: "0",
        itmWldmPmgg: 99,
        itmWldm: null,
        itmWlpm: null,
        itmWlgg: null,
        itmPmgg: null,
      },
      // 表单校验
      childFormRules: {
        query: [
          { required: true, message: "物料代码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getDicts("sys_flag").then((response) => {
      this.bodWwbzOptions = response.data;
    });
    this.getList();
    this.getDicts("sys_bom_ztbz").then((response) => {
      this.bomZtbzOptions = response.data;
    });
    this.getDicts("sys_unit").then((response) => {
      this.itmDwOptions = response.data;
    });

    this.getDicts("sys_bom_style").then((response) => {
      this.bomStyleOptions = response.data;
    });
    getItmWldmAndCustWldmList().then((res) => {
      this.ItmWldmAndCustWldmList = res.data;
    });

    //将不是字典的集合转为字典
    getAllCgList().then((response) => {
      this.bomCgsxOptions = response.data;
      for (let i of this.bomCgsxOptions) {
        i.dictLabel = i.cgName;
        i.dictValue = i.cgId + "";
        i.listClass = "default";
      }
    });
  },
  methods: {
    /** 查询bom资料维护列表 */
    getList(row) {
      this.loading = false;
    },
    // 取消按钮
    cancel() {
      this.addChildView = false;
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.childForm = {
        itmWldm: null,
        bodOrder: "0",
        itmWldmPmgg: null,
      };
      this.resetForm("childForm");
    },
    load() {
      if (!!this.childForm.query) {
        if (
          this.queryChildParams.pageNum <
          Math.ceil(this.totalAdd / this.queryChildParams.pageSize)
        ) {
          this.queryChildParams.pageSize = 20;
          this.queryChildParams.pageNum++;
          getItmMstrByItmWldmOrCustWldm(
            this.childForm.query,
            this.queryChildParams
          ).then((response) => {
            this.ItmWldmAndCustWldmListTop50 =
              this.ItmWldmAndCustWldmListTop50.concat(response.rows);
            this.totalAdd = response.total;
          });
        }
      }
      return 0;
    },
    handleSelect() {
      this.title = "bom展开查询";
      this.addChildView = true;
    },

    submitChildForm() {
      this.loading = true;
      selectByOrders(
        this.childForm.itmWldm,
        this.childForm.bodOrder,
        this.childForm.itmWldmPmgg
      )
        .then((response) => {
          this.addChildView = false;
          this.childBomList = response.data;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
      // this.$refs['childForm'].validate((valid) => {
      //   if (valid) {
      //     selectByOrders(this.childForm.itmWldm, this.childForm.bodOrder, this.childForm.itmWldmPmgg)
      //       .then((response) => {
      //         this.addChildView = false
      //         this.childBomList = response.data
      //         this.loading = false
      //       })
      //       .catch((res) => {
      //         this.loading = false
      //       })
      //   } else {
      //     this.loading = false
      //   }
      // })
      this.addChildView = false;
    },

    getWldmListTOP50(query) {
      /* let temp = []
      let that = this
      new Promise(function (resolve, reject) {
        for (let i of that.ItmWldmAndCustWldmList) {
          if (i.itmWldm.indexOf(query) != -1) {
            temp.push(i)
          }
        }
        resolve(temp)
      }).then((res) => {
        that.ItmWldmAndCustWldmListTop50 = res.slice(0, 50)
      }) */
      if (!!query) {
        this.queryChildParams.pageNum = 1;
        this.queryChildParams.pageSize = 20;
        getItmMstrByItmWldmOrCustWldm(query, this.queryChildParams).then(
          (response) => {
            this.ItmWldmAndCustWldmListTop50 = response.rows;
            this.totalAdd = response.total;
          }
        );
      }
    },
    getPmgg(row) {
      /* if (this.childForm.itmWldm) {
        selectItmByWldm(this.childForm.itmWldm).then((response) => {
          if (response.data) {
            this.childForm.itmWldmPmgg = response.data.itmPmgg
          } else {
            this.msgSuccess('系统无此物料')
          }
        })
      } */
      this.childForm.itmWldm = row.itmWldm;
      this.childForm.itmWlpm = row.itmWlpm;
      this.childForm.itmWlgg = row.itmWlgg;
      this.childForm.itmPmgg = row.itmWlpm + " " + row.itmWlgg;
    },
    /** 导出按钮操作 */
    handleExport(a, b) {
      exportTable(a, b);
    },
  },
};
</script>
<style lang="scss" scoped>
.addButton {
  margin-left: 15px;
}

.el-table .a {
  color: #3ac63a;
}
</style>
